<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>聊天室</title>
  <link rel="stylesheet" href="/css/current.css">
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/jquery-emoji/lib/css/jquery.mCustomScrollbar.min.css">
  <link rel="stylesheet" href="/jquery-emoji/src/css/jquery.emoji.css">
</head>

<body>
  <p class="user_t" style="display: none;">
    <%=data%>
  </p>
  <div class="box">
    <div class="ltt">
      <img class="tx" src="/images/tx1.jpg" alt="">
      <div class="sjg">
        <img src="/images/lt_active.png" alt="">
        <img src="/images/lxr.png" alt="">
        <img src="/images/pyq.png" alt="">
      </div>
      <img class="sz" src="/images/sz.png" alt="">
    </div>
    <div class="cy">
      <p class="bt">聊天室群组</p>
      <div class="heng"></div>
      <div class="cys">
        <div class="fz">
          <img class="qtx" src="/images/qtx1.jpg" alt="">
          <p class="qname">奥利给品尝分享心得群</p>
          <p class="jjie">群简介:老八粉丝尝坨群。</p>
        </div>
      </div>
    </div>
    <div class="zhukuang">
      <div class="top">
        <img class="qun" src="/images/qun.png" alt="">
        <p class="top_z">奥利给品尝分享心得群</p>
        <img class="xx" src="/images/X.png" alt="">
      </div>
      <!-- 聊天内容开始 -->
      <div class="nr" id="scrolldIV">
        <!-- <div class="right">
          <img class="ntx1" src="/images/tx1.jpg" alt="">
          <p class="nik">傻逼一号</p>
          <div class="qp1">你啥你啥也不是你啥也不是你啥也不</div>
        </div>
        <div class="shangxian">
          <p><b>大傻逼</b>&nbsp;<span>已上线</span></p>
        </div>
        <div class="left">
          <img class="ntx2" src="/images/tx1.jpg" alt="">
          <p class="nik">傻逼二号</p>
          <div class="qp2">你啥你啥也不是你啥也不是你啥也不</div>
        </div> -->
      </div>
      <!-- 聊天内容结束 -->

      <div class="texta">
        <img class="bq" src="/images/bq.png" alt="">
        <a href="javascript:void(0)" class="bta" target=""><button class="lsjl">历史记录</button></a>
        <div style="overflow: hidden;height: 138px;width: 100%;">
          <textarea name="" id="texte" cols="100" rows="10" disabled></textarea>
        </div>
        <button class="sed">发送</button>
        <a class="login logina" href="/login">登录</a>
      </div>
    </div>
  </div>

  <div id="yc">
    <div class="right">
      <img class="ntx1" src="/images/tx1.jpg" alt="">
      <p class="nik">傻逼一号</p>
      <div class="qp1">你啥你啥也不是你啥也不是你啥也不</div>
    </div>
    <div class="left">
      <img class="ntx2" src="/images/tx1.jpg" alt="">
      <p class="nik">傻逼二号</p>
      <div class="qp2">你啥你啥也不是你啥也不是你啥也不</div>
    </div>
    <div class="shangxian">
      <p><b class="sxz">大傻逼</b>&nbsp;<span>已上线</span></p>
    </div>
  </div>


  <script src="/socket.io/socket.io.js"></script>
  <!-- <script src="/jquery/dist/jquery.js"></script> -->
  <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
  <script src="/jquery-emoji/lib/script/jquery.mousewheel-3.0.6.min.js"></script>
  <script src="/jquery-emoji/lib/script/jquery.mCustomScrollbar.min.js"></script>
  <script src="/jquery-emoji/src/js/jquery.emoji.js"></script>
  <script>

    //滚动条
    function scroll() {
      let right = document.querySelectorAll(".nr .right");
      let left = document.querySelectorAll(".nr .left");
      let shangxian = document.querySelectorAll(".nr .shangxian");
      let sheight = right.length * 90 + left.length * 90 + shangxian.length * 30;
      $('#scrolldIV').scrollTop(sheight);
    }

    let socket = io.connect("/");
    let username = $('.user_t').text().trim();
    //登录之后
    // console.log(username);
    if (username != "") {
      //历史记录
      $('.bta')[0].target = "_blank";
      $('.bta')[0].href = "/lsjl";
      //表情初始化
      $("#texte").emoji({
        icons: [{
          path: "/jquery-emoji/src/img/qq/",
          maxNum: 91,
          excludeNums: [41, 45, 54],
          file: ".gif",
          placeholder: "#qq_{alias}#"
        }],
      });

      $("#editor").emoji({
        icons: [{
          name: "QQ表情",
          path: "/jquery-emoji/src/img/qq/",
          maxNum: 91,
          excludeNums: [41, 45, 54],
          file: ".gif",
          placeholder: "#qq_{alias}#"
        }]
      });
      $("#editor").emoji('show');
      $("#editor").emoji('hide');
      $("#editor").emoji('toggle');

      //登录按钮隐藏
      $('.logina').hide();
      //解禁文本域
      $('textarea')[0].disabled = false;
      //向服务端发送用户名
      socket.emit("gyf", { username: username });
      //点击发送
      $('.sed').on('click', function () {
        let me = $('#yc .right').clone();
        let v = $('textarea').val().trim();
        if (v == "") {
          return;
        }
        me.find('.qp1').html(v);
        me.find('.nik').html(username);
        $('.nr').append(me);
        $('textarea').val("");
        //表情
        $(".qp1").emojiParse({
          icons: [{
            path: "/jquery-emoji/src/img/qq/",
            file: ".gif",
            placeholder: "#qq_{alias}#"
          }]
        });
        socket.emit("gyf", { username: username, xinxi: v });
        scroll();
      });

      //回车发送
      $(window).keydown(function (e) {
        if (e.keyCode == 13) {
          //trigger 可以让左边的对象执行一次右边的事件
          $('.sed').trigger('click');
          return false;
        }
      });

      //接收服务端数据
      socket.on('gyf', function (data) {
        console.log(data.username);
        //接收信息
        if (data.xinxi != undefined) {
          let me = $('#yc .left').clone();
          me.find('.qp2').html(data.xinxi);
          me.find('.nik').html(data.username);
          $('.nr').append(me);
          //表情
          $(".qp2").emojiParse({
            icons: [{
              path: "/jquery-emoji/src/img/qq/",
              file: ".gif",
              placeholder: "#qq_{alias}#"
            }]
          });
          scroll();
          return;
        }
        //接收用户
        if (data.username != undefined) {
          if (data.xinxi != undefined) {
            return;
          } else {
            var hh = $('.sxz');
            for (let i = 0; i < hh.length; i++) {
              let ss = hh[i];
              let sst = $(ss).text().trim();
              // console.log(sst);
              if (sst == data.username) {
                return;
              }
            }
            let cy = $('#yc .shangxian').clone();
            cy.find('.sxz').text(data.username);
            $('.nr').append(cy);
          }
        }
      });
    }



  </script>
</body>

</html>